<script setup>
import {reactive, ref} from "vue";
import {generate, page} from "@/apis/dev/generator.js";
import {onMounted} from "vue";
import {NButton, NSpace} from "naive-ui";

onMounted(() => {
  loadPageData()
})
const pagination = reactive({
  itemCount: 0,
  page: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40, 50],
  showSizePicker: true,
  showQuickJumper: true,
  prefix: () => `共 ${pagination.itemCount} 条`,
  onUpdatePage: async (page) => {
    pagination.page = page
    await loadPageData()
  },
  onUpdatePageSize: async (pageSize) => {
    pagination.pageSize = pageSize
    await loadPageData()
  }
})
const searchForm = reactive({
  tableName: undefined
})
const loading = ref(false)
const tableData = ref([])
const loadPageData = async () => {
  loading.value = true
  const {code, data} = await page(pagination.page, pagination.pageSize, searchForm)
  loading.value = false
  if (code === 0) {
    tableData.value = data
  }
}
const columns = [
  {
    type: 'selection',
  },
  {
    title: '表名',
    key: 'tableName',
  },
  {
    title: '表注释',
    key: 'tableComment',
  },
  {
    title: '创建时间',
    key: 'createTime',
  }
]

const checkedRowKeys = ref([])
const onRowChecked = (rowKeys) => {
  checkedRowKeys.value = rowKeys
}
const onGenerateClicked = () => {
  generate(checkedRowKeys.value)
}
</script>

<template>
  <n-space vertical>
    <n-space>
      <n-form inline label-placement="left" :model="searchForm">
        <n-form-item label="表名" path="tableName">
          <n-input v-model:value="searchForm.tableName" placeholder="请输入" clearable/>
        </n-form-item>
      </n-form>
      <n-button type="primary" @click="loadPageData">查询</n-button>
    </n-space>
    <n-button type="primary" @click="onGenerateClicked">代码生成</n-button>
    <n-data-table
        remote
        @update:checked-row-keys="onRowChecked"
        ref="table"
        :columns="columns"
        :data="tableData"
        :loading="loading"
        :pagination="pagination"
        :row-key="(rowData) => rowData.tableName"
    />
  </n-space>
</template>

<style scoped>

</style>